<template>
  <div class="app-container">
    <div class="search-bar">
      <search-bar :search="searchParams" @on-search="search">
        <el-form
          inline
          label-position="right"
          :model="searchParams"
          class="search-form-inline"
          label-width="70px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="供应商">
                <el-input
                  v-model.trim="searchParams.supplierName"
                  placeholder="供应商名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人">
                <el-input
                  v-model.trim="searchParams.contactsName"
                  placeholder="联系人"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="级别">
                <el-select
                  v-model="searchParams.level"
                  placeholder="供应商级别"
                  clearable
                >
                  <el-option
                    v-for="item in supplierLevels"
                    :key="item"
                    :value="item"
                    :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </search-bar>
    </div>
    <div class="tb-main">
      <Table-header createBtnText="新建供应商" @create="showDialog"/>
      <page-table
        :WP_MaxHeight="370"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column
          label="供应商名称"
          prop="supplierName"
          fixed
          min-width="150"
          show-overflow-tooltip
        >
          <template slot="header">
            <div class="wp-table-header__tooltip">
              <el-tooltip
                content="供应商名称" placement="top"
              ><span>供应商名称</span></el-tooltip
              >
            </div>
          </template>
          <template slot-scope="scope">
            <el-link type="primary" @click="showDialog('编辑供应商-'+ `${scope.row.supplierName}`,scope.row)">{{
              scope.row.supplierName
              }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="所属省份"
          prop="province"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="级别" prop="level" show-overflow-tooltip>
          <template slot="header">
            <div class="wp-table-header__tooltip">
              <el-tooltip
                content="供应商级别" placement="top"
              ><span>级别</span></el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="联系人姓名" prop="contactsName">
          <template slot="header">
            <div class="wp-table-header__tooltip">
              <el-tooltip
                content="联系人姓名" placement="top"
              ><span>联系人姓名</span></el-tooltip
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="150"
          label="联系人手机号"
          prop="contactsMobile"
        >
          <template slot="header">
            <div class="wp-table-header__tooltip">
              <el-tooltip
                content="联系人手机号" placement="top"
              ><span>联系人手机号</span></el-tooltip
              >
            </div>
          </template>
        </el-table-column>

        <el-table-column min-width="120" label="联系邮箱" prop="email" show-overflow-tooltip></el-table-column>
        <el-table-column
          label="备注"
          prop="remark"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="负责人" prop="chargePersonName"></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="创建人" prop="creatorName"></el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click.native="handleDelete(scope.row)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </page-table>
    </div>
    <Detail-panel ref="SupplierDetailPanel"/>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import TableHeader from './components/supplier/TableHeader'
import DetailPanel from './components/supplier/DetailPanel'
import Mixins from './mixins'

export default {
  components: {SearchBar, TableHeader, PageTable, DetailPanel},
  mixins: [Mixins],
  data () {
    return {
      id: 'supplier',
      show: false,
      rules: {
        supplierName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        level: [{required: true, message: '不能为空', trigger: 'blur'}]
      }
    }
  },
  computed: {
    ...mapGetters(['supplierLevels'])
  },
  methods: {
    showDialog (title, row) {
      this.$refs.SupplierDetailPanel.show(title, {...row})
    },
    handleDelete (row) {
      this.$msgBox.confirm(
        '确认删除供应商-' + row.supplierName + '?',
        () => {
          this.requestOption('delete', row.id, (res) => {
            this.initPageList()
          })
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
